<template>
  <div class="session-box-item">
    <div class="session-box-item">
      <span class="session-box-item-title">
        {{ infoItems.name }}
        <span style="float:right;margin-right:20px;" v-if="edit === 'true'">
            <el-button type="text" icon="el-icon-edit">编辑</el-button>
        </span>
      </span>
      <span
        style="display: block;"
        v-for="item in infoItems.items"
        :key="item.label"
        :style="'height:' + height + 'px'"
      >
        <span class="session-box-item-label">{{ item.label }}</span>
        <span class="session-box-item-info">{{ item.info }}</span>
      </span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["infoItems", "edit",'height'],
};
</script>

<style>
.session-box-item-title {
  display: block;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  margin-bottom: 10px;
  margin-left: 20px;
}

.session-box-item-label {
  display: inline-block;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  color: #cccccc;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  width: 80px;
  padding: 0 20px;
  margin: 5px 0;
}

.session-box-item-info {
  font-family: "ArialMT", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
}
</style>